<!-- 流程节点配置人员选择 -->
<template>
	<view class="">
		<!-- 流程节点人员配置弹窗 -->
		<u-popup :show="showPopup" @close="closePopup" :closeOnClickOverlay="false" @open="openPopup" mode="center" :round="10" closeable>
			<view class="pages" >
				<template>
					<text class="title">操作</text>
					<u-line margin="20rpx 0 20rpx 0"></u-line>
				</template>
				<view class="">
					<view class="title-color title">流程节点人员配置</view>
					<u-line-progress :percentage="40" activeColor="#40a9ff" :showText="false" :height="2"></u-line-progress>
				</view>
				<view style="max-height: 80vh; overflow-y: auto;">
					<u-row
						style="margin-top: 30rpx;"
						justify="space-between"
						gutter="10">
						<u-col span="5">
							<view class="">节点名称</view>
						</u-col>
						<u-col span="7">
							<view class="">操作人</view>
						</u-col>
					</u-row>
					<u-row
						style="margin: 10rpx;"
						justify="space-between"
						v-for="(item, index) in model.erpProcessConfigMainVoList" 
						:key="index"
						gutter="10">
						<template v-if="item.taskType.includes('UserTask') || item.nodeName.includes('知会')">
							<u-col span="5">
								<u--input
								    placeholder="节点名称"
									v-model="item.nodeName"
								    border="surround"
									:fontSize="12"
									disabled
								  ></u--input>
							</u-col>
							<template v-if="item.taskType.includes('ServiceTask')">
								<u-col span="7">
									<view class="" style="display: flex;">
										<view class="">
											<u--input
												v-model="item.nodeName"
												placeholder="执行人"
												border="surround"
												:fontSize="12"
												readonly
											  ></u--input>
										  </view>
									</view>
								</u-col>
							</template>
							<template v-else>
								<u-col span="7" v-if="item.isSelectDisabled === '0'">
									<view class="" style="display: flex;">
										<view class="">
											<u--input
												v-model="item.nodeName"
												placeholder="执行人"
												border="surround"
												:fontSize="12"
												readonly
											  ></u--input>
										  </view>
									</view>
								</u-col>
								<u-col v-else span="7">
									<!-- isSequenceApprove 是否顺序审批 -->
									<ProcessSelectUserPopup :detail="item" v-model="item.linUser" ref="processSelectUserPopup" :multi="item.isMultAssignee=='1'" :isSequenceApprove="item.isSequenceApprove=='1'"></ProcessSelectUserPopup>
								</u-col>
							</template>
						</template>
					</u-row>
				</view>
				<view class="" style="display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx;">
					<u-button text="关闭" @click="closePopup" :plain="true" class="custom-style" ></u-button>
					<u-button text="确定" class="custom-style" @tap="$u.debounce(onSubmit, 500)" type='primary'></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import ProcessSelectUserPopup from './ProcessSelectUserPopup.vue'
import {
	getBpmListByCode ,// 流程人员配置列表
	addPeopleBatch ,// 提交审批流程人员
	startMutilProcess // 绑定流程审批页面
} from '@/api/index.js'
import http from '@/utils/request/index'
export default {
	components: {
		ProcessSelectUserPopup,
	},
	data() {
		return {
			showPopup: false,
			flowCode: '',
			formUrl: '',
			formUrlMobile: '',
			id: '',
			model:{
				erpProcessConfigMainVoList: []
			},
			startProcess: '/api/erpmng/act/process/extActProcess/startMutilProcess'
		};
	},
	onLoad(options) {
		
	},
	props: {
		isCheck: {
			type: String,
			default: "0",
			required: false
		},
		isAfterStart: {
			type: String,
			default: "0",
			required: false
		}
	},
	methods: {
		edit (record, processId, beanName) {
			// this.$nextTick(() => {
			//   this.$refs.form.resetFields();
			// })
			this.processId = processId
			this.beanName = beanName
			this.id = record
			this.model.erpProcessConfigMainVoList = [];
			//初始化明细表数据
			let params = {
			  id: record,
			  beanName: beanName,
			  flowCode: this.flowCode
			}
			// 初始化流程配置详情
			getBpmListByCode(params).then(res => {
				var _this = this
				if (res.success) {
					res.result.map(v => v.linUser = v.execUser)
					this.$set(this.model,'erpProcessConfigMainVoList',res.result)
					this.showPopup = true;
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						success () {
							_this.timer = setTimeout(() => {
								uni.reLaunch({
									url: `/pages/synergy/synergy?tabValue=4`
								})
								clearTimeout(_this.timer)
								_this.timer = null
							}, 1500)
						}
					})
					this.showPopup = false;
				}
			})
		},
		closePopup () {
			// #ifdef APP-PLUS
			uni.showModal({
				content: '确定取消提交流程',
				
				success: function (res) {
					if (res.confirm) {
						this.showPopup = false
						if (getCurrentPages().length > 1) {
							uni.navigateBack()
						} else {
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}
					}
				}
			});
			// #endif
			// #ifdef H5
			uni.navigateBack()
			// #endif
			
		},
		openPopup () {
			this.showPopup = true
		},
		
		onSubmit () {
			var that = this
			let flag = false
			let flag1 = false
			var warnMessage = ''
			this.model.erpProcessConfigMainVoList.forEach(val => {
				warnMessage = ''
				val.dataId = this.id
				var flowPrifex = this.flowCode.slice(0,this.flowCode.indexOf('_'));
				if (flowPrifex === 'onl') {
					val.dataTable = this.flowCode.slice(this.flowCode.indexOf('_') + 1,this.flowCode.length)
				} else if (flowPrifex === 'dev') {
					val.dataTable = this.flowCode.slice(this.flowCode.indexOf('_') + 1,this.flowCode.lastIndexOf('_'))
				}
				if (val.taskType.includes('UserTask')  && val.isSelectDisabled !== '0') {
					if (!val.linUser) {
						flag = true
						return
					}

					if(val.linUser.split(',').length !== 1 && !val.nodeName.includes('知会') && val.isSelectDisabled !== '0' && val.isMultAssignee !== '1') {
						flag1 = true
						return
					}
			  }
			})
			if (flag) {
			  // this.$message.warning('请完善执行人')
			  uni.showToast({
			  	title: '请完善执行人',
				icon: 'none'
			  })
			  return
			}
			if (flag1) {
			  // this.$message.warning('每个节点只能选择一个审批人')
			  uni.showToast({
			  	title: '每个节点只能选择一个审批人',
			  	icon: 'none'
			  })
			  return
			}
			this.model.erpProcessConfigMainVoList.map(v => v.execUser = v.linUser)
			const params = {
			  dataList: Object.assign([],this.model.erpProcessConfigMainVoList),
			  id: this.id
			}
			
			addPeopleBatch(params).then(res => {
				if(res.success) {
					var param = {
						flowCode: that.flowCode,
						id: that.id,
						formUrl: that.formUrl,
						formUrlMobile: that.formUrlMobile,
						beanName: that.beanName,
						isCheck: that.isCheck,
						isAfterStart: that.isAfterStart
					}
					// 使用接口调用
					http.post(that.startProcess, param).then((res) => {
						if (res.success) {
							that.$emit('ok')
						  } else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						  }
						}).catch((e) => {
						  uni.showToast({
						  	title: '不识别的请求!',
						  	icon: 'none'
						  })
						}).finally(() => {
							
						})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
			that.showPopup = false;  // 关闭弹窗
		}
	}
};
</script>

<style lang="scss" scoped>
.pages{
	padding: 20rpx;
	width: 750rpx;
	.title{
		margin: 0;
		color: rgba(0,0,0,.85);
		font-weight: 500;
		font-size: 30rpx;
		word-wrap: break-word;
	}
	.title-color{
		color: #40a9ff;
		font-size: 26rpx;
		font-weight: 500;
		text-shadow: 0 0 .25px currentColor;
	}
}
.page {
	padding: 0 20rpx 20rpx 20rpx;
	.list{
		border-radius: 10rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
		padding: 12rpx 20rpx 20rpx 20rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}
}

// 按钮
.btn{
	position: fixed;
	bottom: 20rpx;
	width: 95%;
}

.custom-style {
	width: 200rpx; 
	height: 80rpx;
}
</style>